<#include "module/macro.ftl">
<@head title="${category.name!} - ${blog_title!}"/>
<#include "module/sidebar.ftl">
<!-- ===========================
    =====>> Inner Page Hero <<===== -->
<div class="inner-page-hero-area bg-com jarallax">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="inner-page-hero-text">
                    <div class="inner-page-title">产品展示</div>
                    <ul class="inner-page-u">
                        <li>主页</li>
                        <li>产品展示</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- =====>> End Inner Page Hero <<===== 
    ================================= -->

<!-- ===========================
    =====>> Shop <<===== -->
<section class="shop-area pt-120 pb-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="shop-content">
                    <div class="row" id="shop-content-items">
                        <#list posts.content as post>
                            <div class="shop-content-item col-xl-3 col-md-4 col-sm-6">
                                <div class="single-shop-product">
                                    <div class="single-product-image">
                                    <a href="${post.fullPath}"> <img src="${post.thumbnail}" alt="product"> </a>
                                    </div>
                                    <div class="single-product-text">
                                        <h3><a href="${post.fullPath}">${post.title}</a></h3>
                                        <div>${post.summary}</div>
                                        <div class="product-price">
                                            <h3>¥${post.metas.price!}</h3>
                                            <ul class="product-rating">
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star-half-o"></i></li>
                                            </ul>
                                        </div>
                                        <#--                  <div class="product-button"> <a href="#">add to cart</a> <a href="#"><i class="fa fa-heart"></i></a> <a href="#"><i class="fa fa-sync-alt"></i></a> </div>-->
                                    </div>
                                </div>
                            </div>
                        </#list>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="pagination_box">
                                <@paginationTag method="categoryPosts" slug="${category.slug!}" page="${posts.number}" total="${posts.totalPages}" display="3">
                                    <ul class="pagination" id="pagination">
                                        <#if pagination.hasNext && posts.content?size == 10>
                                            <li><a href="${pagination.nextPageFullPath!}">加载更多</a></li>
                                        <#else>
                                            <li>
                                                <span>没有更多了</span>
                                            </li>
                                        </#if>
                                    </ul>
                                </@paginationTag>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- =====>> End Shop <<===== 
    =========================== -->
<#--<script src="${theme_base!}/source/js/jquery-3.4.1.min.js"></script>-->
<script>
$("body").on("click", "#pagination a", function () {
    $(this).addClass("loading").text("");
    $.ajax({
        type: "GET",
        url: $(this).attr("href") + "#shop-content-items",
        success: function (data) {
        var result = $(data).find("#shop-content-items .shop-content-item");
        var nextHref = $(data).find("#pagination a").attr("href");
        // 添加新的内容
        $("#shop-content-items").append(result.fadeIn(500));
        $("#pagination a").removeClass("loading").text("加载更多");
        if (nextHref != undefined) {
            $("#pagination a").attr("href", nextHref);
        } else {
            $("#pagination li").html("<span>没有更多了</span>");
        }
        },
    });
    return false;
});
</script>
<@footer></@footer>